<template>
<el-form ref="ruleFormRef" :rules="rules" :model="formLesson" label-width="80px">
  <el-row>
    <el-col :span="6">
      <el-form-item label="所属教师" prop="teacherId">
        <el-select v-model="formLesson.teacherId" placeholder="请选择教师" style="width: 100%;">
          <el-option v-for="item in teacherOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
    </el-col>

    <el-col :span="6">
      <el-form-item label="课程类型" prop="lessonTypeId">
        <el-select v-model="formLesson.lessonTypeId" placeholder="请选择课程类型" style="width: 100%;">
          <el-option v-for="item in lessonTypeOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
    </el-col>

    <el-col :span="6">
      <el-form-item label="课程名称" prop="lessonName">
        <el-input v-model="formLesson.lessonName" placeholder="请输入课程名称"/>
      </el-form-item>
    </el-col>

    <el-col :span="6">
      <el-form-item label="课程id" prop="lessonNumber">
        <el-input v-model="formLesson.lessonNumber" placeholder="请输入课程id"/>
      </el-form-item>
    </el-col>

    <el-col :span="6">
      <el-form-item label="课程描述" prop="courseDesc">
        <el-input v-model="formLesson.courseDesc" placeholder="请输入课程描述"/>
      </el-form-item>
    </el-col>

    <el-col :span="24">
      <el-form-item label="课程封面" prop="lessonImg">
        <!--上传图片控件 start-->
        <el-upload v-model:file-list="fileList" :action="uploadURL" name="fileResource" list-type="picture-card" :auto-upload="true"
                   :limit="1" :on-success="handleSuccess">
          <el-icon><Plus /></el-icon>
        </el-upload>
        <!--上传图片控件 end-->
      </el-form-item>
    </el-col>
  </el-row>
</el-form>
  <div class="dialog-button-wrap">
    <el-button @click="close">取消</el-button>
    <el-button @click="editLesson(ruleFormRef)" type="success" :loading="subLoading" color="#083a6d">保存</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted,shallowRef } from 'vue'
import {ElMessage,UploadFile,UploadProps,UploadUserFile,FormInstance,FormRules} from 'element-plus'
import {editLessonApi, getAllTeacherListApi, getAllLessonTypeListApi} from "@/api/edu/lesson/lesson"
import '@wangeditor/editor/dist/css/style.css' // 引入 css
// 定义表单实例对象
const ruleFormRef = ref<FormInstance>()
// 表单约束规则对象
const rules = reactive<FormRules>({
  lessonName: [{ required: true,message: '课程名称不能为空',trigger: 'blur' }],
  lessonNumber: [{ required: true,message: '课程id不能为空',trigger: 'blur' }],
  lessonTypeId: [{ required: true,message: '课程类型ID不能为空',trigger: 'blur' }],
  teacherId: [{ required: true,message: '教师ID不能为空',trigger: 'blur' }],
  lessonImg: [{required: true,message: '封面不能为空',trigger: 'blur'}],
  courseDesc: [{required: true,message: '课程描述不能为空',trigger: 'blur'}],

})
// 定义服务器路径
const url = import.meta.env.VITE_APP_BASE_API
// 图片上传到服务器的路径
const uploadURL = url+'user/userIcon'
// 定义事件
const emit = defineEmits(['closeEditLessonForm','success'])

// 按钮状态
const subLoading = ref(false)
// 表单数据对象
const formLesson = reactive({
  id: 0,
  lessonName: '',
  lessonNumber: '',
  lessonTypeId: '',
  teacherId: '',
  lessonImg: '',
  courseDesc:'',
})
// 获取父组件传过来的lessonInfo对象
const props = defineProps(['lessonInfo'])
const lessonInfo = ref(props.lessonInfo)
// 给表单填充数据
for (const key in formLesson) {
  formLesson[key] = lessonInfo.value[key]
}

// 处理回显封面
const fileList = ref<UploadUserFile[]>([
    {
      name: '封面图',
      url: url+'uploadFile/'+formLesson.lessonImg
    }
])

// 更新课程信息
const editLesson = async (formEl: FormInstance |undefined)=> {
  if(!formEl)return
  await formEl.validate(async (valid,fields)=> {
    subLoading.value = true
    if(valid){
      const { data } = await editLessonApi(formLesson)
      if(data.status === 200){
        ElMessage.success(data.message)
        emit('success')
      }else {
        ElMessage.error(data.message)
      }
    }else {
      ElMessage.error('提交失败，你还有未填写的项！')
    }
  })
  subLoading.value = false
}
// 定义课程类型下拉框选择项
const lessonTypeOptions = ref<object[]>([])
// 获取所有课程类型信息
const getAllLessonTypeList = async ()=> {
  const { data } = await getAllLessonTypeListApi()
  lessonTypeOptions.value = data.result
}
// 定义教师下拉框选择项
const teacherOptions = ref<object[]>([])
// 获取所有教师信息
const getAllTeacherList = async ()=> {
  const { data } = await getAllTeacherListApi()
  teacherOptions.value = data.result
}
onMounted(()=> {
  getAllLessonTypeList()
  getAllTeacherList()
})
// 取消表单
const close = ()=>{
  emit('closeEditLessonForm')
}
</script>

<style scoped>
.dialog-button-wrap {
  text-align: center;
  margin-top: 20px;
}
</style>
